<template>
  <div>
    <HeaderTitle :textObj="textObj"></HeaderTitle>
    <div class="mt-10 bg-fff p-20" >
      <span>选择月份：</span>
      <el-date-picker
          v-model="time"
          type="month"
          placeholder="请选择月份"
          @change="timeChange"
          value-format="YYYY-MM"
        >
        <template #default="cell">
        <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
          <span class="el-date-table-cell__text">{{ cell.text + 1 }}月</span>
        </div>
      </template>
      </el-date-picker>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column align="center" prop="id" label="充值id" width="180" />
      <el-table-column
        align="center"
        prop="cTime"
        label="日期"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="amount"
        label="充值金额"
        width="100"
      />

      <el-table-column align="center" prop="type" label="类型" />
      <el-table-column align="center" prop="desc" label="备注" />
    </el-table>

    <div class="fcc bg-fff p-20">
      <el-pagination
      :hide-on-single-page="true"
        @current-change="onChange"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup>
import HeaderTitle from "../../components/HeaderTitle.vue";
import { ref, onMounted } from "vue";
import { $feeUsageList } from "@/api/index.js";
import { formatDate } from "@/utils/utils.js";

let textObj = {
  title: "计费   ",
  name: "使用记录 ",
  dsc: " 统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录。",
};
let tableData = ref([
  {
    id: "530000198011127833",
    type: "usege",
    desc: "片情得九史级无强。",
    amount: -200,
    cTime: 1672116274230,
  },
]);

let params = ref({
  currPage: 1,
  pageSize: 10,
});
let total = ref(0);

// 分页
const onChange = (page) => {
  params.value.currPage = page;
  getList();
};
// 获取充值列表
const getList = () => {
  $feeUsageList(params.value).then((res) => {
    tableData.value = res.data;
    total.value = res.total;
  });
};
// 时间搜索
const time = ref("");
const timeChange =  () => {
  params.value.currPage = 1;
  params.value.date = time.value;
  // 避免触发 onChange 方法
  getList();
}

onMounted(() => {
  getList();
});
</script>

<style>
</style>